/**
 *　ShoppersItem
 */

 var React = require("react");
 var CommonItem = require("./CommonItem");
 var CommonMask = require("./CommonMask");
 var CommonHeader = require("./CommonHeader");
 var ShoppersItem = React.createClass({
    mixins: [CommonItem],
    componentWillMount: function (){
        var rootPath = "/static/new_version/image/recognize/";
        this.urls = {
            jd: rootPath + "jd.png",
            sn: rootPath + "sn.png",
            tb: rootPath + "tb.png",
            tm: rootPath + "tm.png"
        };
        this.shopperTypes = ["jd", "tb", "tm", "sn"];
    },
    render: function (){
        const {type}=this;
        const {data,updateState} = this.props;
        let shoppersNode = [];
        this.shopperTypes.forEach(function (type){
            var shopper = data[type];
            var isInvalid = !shopper.title && !shopper.price;
            if (shopper.url){
                shoppersNode.push(
                    <li key={type} className="shoppers-item">
                        <img src={this.urls[type]} />
                        <span className="shoppers-details-item">
                            <span className={isInvalid ? "error" : "title"}>{ shopper.title || "请检查网址输入是否正确！" }</span>
                            <span className="price">￥{ shopper.price || "未知" }</span>
                        </span>
                    </li>
                );
            }
        }.bind(this));

        return (
            <div ref="container" className="details-item">
                <CommonMask type={type} updateState={updateState} data={data} />
                <CommonHeader type={type} />
                <div className="details-content">
                    <ul className="shoppers-list">
                        { shoppersNode }
                    </ul>
                </div>
            </div>
        )
    }
 });

 module.exports = ShoppersItem;
